<template>
    <Spin
        size="large"
        v-if="loading"
        v-bind="$attrs"
        :transfer="transfer"
        loading
        @on-close="cancel"
    >
        <div class="font-14" v-if="delay">
            <slot><div v-if="tip" v-html="tip"></div></slot>
            <!-- <span class="color-error"
                >{{ $t("global.loading.delayjump", {
                    '0':loadingtime,
                    defaultValue:loadingtime+'秒后自动跳转'
                }) }}，</span
            > -->
            <!-- <a @click="cancel">{{ $t("global.loading.canceljump",{defaultValue:"取消自动跳转"}) }}</a> -->
            <!-- &nbsp;|&nbsp; -->
            <a @click="goback">{{ $t("global.loading.jump",{defaultValue:"立即跳转"}) }}</a>
        </div>
        <div v-else slot="label">
            <slot><div v-if="tip" v-html="tip"></div></slot>
        </div>
    </Spin>
</template>
<script>
export default {
    inheritAttrs: false,
    props: {
        loading: Boolean,
        transfer: {
            type: Boolean,
            default: true
        },
        time: {
            type: Number,
            default: 10
        },
        delay: Boolean,
        tip: String
    },
    data() {
        return {
            loadingtime: 0
        };
    },
    watch: {
        loading: {
            immediate: true,
            handler(val) {
                this.loadingtime = Number(this.time || 0);
                if (val && this.delay && !this.__interval) {
                    this.handleTimes();
                }
                if (!val && this.__interval) clearInterval(this.__interval);
            }
        },
        delay(val) {
            if (val && this.loading && !this.__interval) this.handleTimes();
            if (!val && this.__interval) clearInterval(this.__interval);
        }
    },
    methods: {
        handleTimes() {
            clearInterval(this.__interval);
            this.__interval = setInterval(() => {
                this.loadingtime -= 1;
                if (this.loadingtime <= 0) this.goback();
            }, 1000);
        },
        goback() {
            clearInterval(this.__interval);
            this.$emit("on-back");
        },
        cancel() {
            clearInterval(this.__interval);
            this.$emit("on-cancel");
        }
    },
    beforeDestroy() {
        clearInterval(this.__interval);
        this.__interval = null;
    }
};
</script>
